import React, { Component, Fragment } from 'react';
import {
  Card,
  Tabs,
  Table,
  Switch,
  Divider,
  Button,
  Modal,
  Form,
  Input,
  Upload,
  message,
  Icon,
} from 'antd';

const TabPane = Tabs.TabPane;

function beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg';
  if (!isJPG) {
    message.error('You can only upload JPG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJPG && isLt2M;
}

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

class AdvertisingWheel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      imageUrl: '',
      dataSource: [
        {
          index: 1,
          title: 'java课',
          image:
            '//img13.360buyimg.com/n7/jfs/t1/18495/8/4007/533533/5c2dc199E8596e296/51f3378d146e8ea0.jpg',
          url: 'http://hengqihj.beta.hqjy.com',
          createdTime: '2019-03-04 09:54',
          createdUser: '张三',
          status: '开',
          id: 0,
        },
      ],
      columns: [
        {
          title: '排序',
          dataIndex: 'index',
          key: 'index',
          align: 'center',
          render: index => {
            return <span>{index}</span>;
          },
        },
        {
          title: '展示标题',
          dataIndex: 'title',
          key: 'title',
          align: 'center',
        },
        {
          title: '图片',
          dataIndex: 'image',
          key: 'image',
          width: 100,
          height: 30,
          align: 'center',
          render: image => {
            return (
              <Fragment>
                <div>
                  <img style={{ width: 100, height: 50 }} src={image} alt="" />
                </div>
              </Fragment>
            );
          },
        },
        {
          title: '跳转链接',
          dataIndex: 'url',
          key: 'url',
          align: 'center',
          render: url => <a href={url}>行家</a>,
        },
        {
          title: '新建时间',
          dataIndex: 'createdTime',
          key: 'createdTime',
          align: 'center',
        },
        {
          title: '创建人',
          dataIndex: 'createdUser',
          key: 'createdUser',
          align: 'center',
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: () => (
            <Switch
              checkedChildren="开"
              onChange={this.handleChange}
              unCheckedChildren="关"
              defaultChecked
            />
          ),
        },
        {
          title: '操作',
          key: 'operation',
          align: 'center',
          render: () => (
            <Fragment>
              <a onClick={this.handleEdit}>编辑</a>
              <Divider type="vertical" />
              <a onClick={this.handleDelete}>删除</a>
            </Fragment>
          ),
        },
      ],
    };
  }

  onChange = () => {
    console.log('tabs的切换');
  };

  handleChange = (bool, e) => {
    console.log(bool);
    console.log(e);
  };

  handleEdit = () => {
    console.log('编辑');
  };

  handleDelete = () => {
    console.log('删除');
  };

  handleCancel = () => {
    console.log('取消添加');
    this.setState({
      visible: false,
    });
  };

  handleOk = () => {
    console.log('确认添加');
    this.setState({
      visible: false,
    });
  };

  handleAdd = () => {
    this.setState({
      visible: true,
    });
  };

  handleSubmit = () => {};

  handleImageChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        })
      );
    }
  };

  handleModelChange = () => {};

  addSwipper = () => {
    const { visible, loading, imageUrl } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const uploadButton = (
      <div>
        <Icon type={loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <Modal
        visible={visible}
        title="新建轮播"
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        footer={[
          <Button key="back" onClick={this.handleCancel}>
            取消
          </Button>,
          <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
            确认
          </Button>,
        ]}
      >
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <Form.Item label="展示标题">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="跳转链接">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item label="上传轮播图">
            <Upload
              name="avatar"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              action="//jsonplaceholder.typicode.com/posts/"
              beforeUpload={beforeUpload}
              onChange={this.handleImageChange}
            >
              {imageUrl ? <img src={imageUrl} alt="avatar" /> : uploadButton}
            </Upload>
            {/* <span>建议大小1440*1040，且小于50M</span> */}
          </Form.Item>
          <Form.Item label="状态">
            <Switch
              checkedChildren="开"
              onChange={this.handleModelChange}
              unCheckedChildren="关"
              defaultChecked
            />
          </Form.Item>
          <Form.Item label="排序">
            <Input placeholder="请输入" />
          </Form.Item>
        </Form>
      </Modal>
    );
  };

  render() {
    const { dataSource, columns } = this.state;
    return (
      <Fragment>
        <Card>
          <Tabs onChange={this.onChange} type="card">
            <TabPane tab="首页轮播" key="1">
              <Button
                type="primary"
                onClick={this.handleAdd}
                icon="plus"
                style={{ margin: '10px 0' }}
              >
                新建轮播
              </Button>
              <Table dataSource={dataSource} columns={columns} rowKey="id" />
            </TabPane>
            <TabPane tab="推广轮播" key="2">
              推广轮播
            </TabPane>
          </Tabs>
        </Card>
        {this.addSwipper()}
      </Fragment>
    );
  }
}

export default AdvertisingWheel;
